<template>
  <div>
    <MyHeader left-color="#fccc04" right-color="#fcec84"></MyHeader>

    <div class="search-component" style="background-image: url('../../../static/searchEverything.png');">
      <p class="search-title">Just Search The Things that U Like</p>
      <div class="search-methods">
        <span :class="{ 'active': selectedMethod === 'geo' }" @click="selectSearchMethod('geo')">SearchByGeo</span>
        <span :class="{ 'active': selectedMethod === 'time' }" @click="selectSearchMethod('time')">SearchByTime</span>
      </div>
      <div class="search-box" style="margin-top: 15px;">
        <el-input :class="selectedMethod === 'geo'? 'geo-input':'time-input'"
                  :placeholder="'Please input the ' + (selectedMethod === 'geo'? 'Geo':'Time') + ' you what to search'"
                  style="width: 600px"
                  v-model="inputText">
          <el-button type="primary" slot="append" icon="el-icon-search" @click="jumpTo()">Submit</el-button>
        </el-input>
      </div>
      <div>

      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from './componet/MyHeader'
import HeaderBottom from './componet/HeaderBottom'
export default {
  name: 'Search',
  components: {HeaderBottom, MyHeader},
  data () {
    return {
      selectedMethod: 'geo',
      inputText: ''
    }
  },
  methods: {
    selectSearchMethod (method) {
      this.selectedMethod = method
    },
    jumpTo () {
      // 根据 selectedMethod 的值来决定跳转到哪个界面
      if (this.selectedMethod === 'geo') {
        // 携带输入的值跳转到 view
        this.$router.push({path: '/wssoc/view', params: {inputValue: this.inputText}})
      } else if (this.selectedMethod === 'time') {
        // 携带输入的值跳转到 analysis
        this.$router.push({path: '/wssoc/analysis', params: {inputValue: this.inputText}})
      }
    }
  }
}
</script>

<style scoped>
.search-component {
  width: 1600px;
  height: 800px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.search-title {
  margin-bottom: 20px;
  font-size: 70px; /* 设置适合的字体大小 */
  text-align: center;
  color: #efff00; /* 文字颜色 */
  font-family: cursive;
  text-shadow: 2px 4px 6px rgba(0, 0, 0, 1); /* 添加阴影效果 */
  font-weight: bold;
}
.search-methods {
  display: flex;
}
.search-methods span {
  font-size: 20px;
  color: #000000;
  min-width: 200px;
  cursor: pointer;
  transition: all 0.2s ease; /* 平滑过渡效果 */
}

.search-methods span.active {
  transform: translateY(4px); /* 下移 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}

.search-box {
  display: flex;
  margin-top: 20px;
}

.geo-button {
  background-color: #0000cc;
}
</style>
